{% extends "base.html" %}
{% block main %}
<section class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">项目介绍</h1>
      <h2 class="subtitle">专选课《Web开发技术》大作业</h2>
    </div>
  </div>
</section>
<section class="hero is-info">
  <div class="hero-body">
    <div class="container">
      <div class="has-text-right has-text-left-mobile mb-2">
        <h1 class="title">开发环境</h1>
      </div>
      <div class="has-text-left">
        <div class="content">
          <p>
            <span class="is-size-5">开发平台: </span>
            <span class="tag is-medium is-info is-light">Arch Linux</span>
          </p>
          <p>
            <span class="is-size-5">运行环境: </span>
            <span class="tag is-medium is-info is-light">Python 3.8.3</span>
          </p>
          <p>
            <span class="is-size-5">兼容性测试平台: </span>
            <span class="tag is-medium is-info is-light">Windows 10</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="hero is-success">
  <div class="hero-body">
    <div class="container">
      <div class="has-text-left mb-2">
        <h1 class="title">后端方案</h1>
      </div>
      <div class="has-text-right has-text-left-mobile">
        <div class="content">
          <p>
            <span class="is-size-5">后端框架: </span>
            <span class="tag is-medium is-success is-light">Python Flask</span>
          </p>
          <p>
            <span class="is-size-5">数据库: </span>
            <span class="tag is-medium is-success is-light">SQLite3</span>
          </p>
          <p>
            <span class="is-size-5">ORM支持: </span>
            <span class="tag is-medium is-success is-light">Flask-SQLAlchemy</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="hero is-link">
  <div class="hero-body">
    <div class="container">
      <div class="has-text-right has-text-left-mobile mb-2">
        <h1 class="title">前端方案</h1>
      </div>
      <div class="has-text-left">
        <div class="content">
          <p>
            <span class="is-size-5">CSS框架: </span>
            <span class="tag is-medium is-link is-light">Bulma</span>
          </p>
          <p>
            <span class="is-size-5">图标库: </span>
            <span class="tag is-medium is-link is-light">Font Awesome 5</span>
          </p>
          <p>
            <span class="is-size-5">JavaScript: </span>
            <span class="tag is-medium is-link is-light">全面去除jQuery, 回归原生JS, 自行封装Ajax函数</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="hero is-warning">
  <div class="hero-body">
    <div class="container">
      <div class="has-text-left mb-2">
        <h1 class="title">亮点介绍</h1>
      </div>
      <div class="has-text-right has-text-left-mobile">
        <div class="content">
          <p>
            <span class="is-size-5">用户系统: </span>
            <span class="tag is-medium is-warning is-light">用户登录系统配合session实现</span>
          </p>
          <p>
            <span class="is-size-5">移动端优化: </span>
            <span class="tag is-medium is-warning is-light">页面对移动端进行了响应式适配</span>
          </p>
          <p>
            <span class="is-size-5">在线图床: </span>
            <span class="tag is-medium is-warning is-light">可一次上传多张图片, 上传界面支持预览</span>
          </p>
          <p>
            <span class="is-size-5">项目结构: </span>
            <span class="tag is-medium is-warning is-light">自定义了类似于Django的项目结构, 便于大型项目的维护、开发和拓展</span>
          </p>
          <p>
            <span class="is-size-5">项目管理: </span>
            <span class="tag is-medium is-warning is-light">Flask Script配合Flask Migrate, 数据库的创建、迁移和升级只需一行命令就搞定</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}